<script setup>

import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { updateUserService } from '@/api/user.js'
import { userInfoStore } from '@/stores/userInfo.js'
import { Check } from '@element-plus/icons-vue'
const formRef = ref(null)
const userInfo = ref({})
const userStore = userInfoStore()
const rules = {
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 4, max: 12, message: '长度在4到12个字符', trigger: 'blur' }],
    nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在2到10个字符', trigger: 'blur' }],
    phone: [{ required: true, message: '请输入手机号', trigger: 'blur' },
    { min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur' }]
}
// 回显用户信息
const getUserInfo = async () => {
    userInfo.value = userStore.info
}
getUserInfo()
const updateInfo = async () => {
    await formRef.value.validate(async (valid) => {
        if (!valid) {
            return
        }
        let res = await updateUserService(userInfo.value)
        if (res.code === 0) {
            ElMessage.success('修改成功')
            // 更新用户信息
            userStore.setInfo(userInfo.value)
        }
    })
}
</script>
<template>
    <div class="page-container">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span class="title">个人信息</span>
                </div>
            </template>
            
            <div class="form-content">
                <el-form 
                    ref="formRef" 
                    :model="userInfo" 
                    :rules="rules" 
                    label-width="100px" 
                    size="large"
                    class="info-form"
                >
                    <el-form-item label="登录名称" prop="username">
                        <el-input v-model="userInfo.username" disabled class="custom-input" />
                    </el-form-item>
                    <el-form-item label="用户昵称" prop="nickname">
                        <el-input v-model="userInfo.nickname" placeholder="请输入昵称" class="custom-input" />
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="userInfo.phone" placeholder="请输入手机号" class="custom-input" />
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <el-select v-model="userInfo.sex" placeholder="请选择" class="custom-input">
                            <el-option label="男" value="男" />
                            <el-option label="女" value="女" />
                        </el-select>
                    </el-form-item>
                    <el-form-item class="form-footer">
                        <el-button type="primary" @click="updateInfo(formRef)" class="submit-button">
                            <el-icon><Check /></el-icon>提交修改
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<style lang="scss" scoped>
.page-container {
    padding: 20px;
    
    .box-card {
        margin-bottom: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        transition: all 0.3s;

        &:hover {
            box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
        }
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;

        .title {
            font-size: 16px;
            font-weight: bold;
            color: #303133;
        }
    }

    .form-content {
        padding: 20px;
        display: flex;
        justify-content: center;
    }

    .info-form {
        width: 500px;
        padding: 20px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

        .el-form-item {
            margin-bottom: 25px;
        }

        .form-footer {
            margin-top: 40px;
            text-align: center;
        }
    }
}

.custom-input {
    width: 100%;
}

.submit-button {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    background-color: var(--el-color-primary) !important;
    border-color: var(--el-color-primary) !important;
    color: white !important;
    cursor: pointer;
    
    &:hover {
        background-color: var(--el-color-primary-light-3) !important;
        border-color: var(--el-color-primary-light-3) !important;
    }
    
    .el-icon {
        margin-right: 4px;
        font-size: 16px;
    }
}

.el-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
</style>
